<template>
	<div class="container">
		<!-- <Header></Header> -->
		<div class="header">
			<iframe src="/#/sounds"></iframe>
		</div>
		<div class="nav">
			<a href="#/"><div class="navbar"><i class="iconfont icon-caipu"></i>导&nbsp;航</div></a>
			<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :unique-opened = "true"
				background-color="#fff" text-color="#FDAF78" active-text-color="#F48130">
				<el-submenu index="0">
					<template slot="title">
						<span>美食视频</span>
					</template>
				</el-submenu>
				<el-submenu v-for="item in info" :index="String(item.id)" class="is-opend" :key="item.id">
					<template slot="title">
						<span>{{item.name}}</span>
					</template>
					<el-menu-item v-for="subitem in item.content" :key="subitem.id" @click="handleClick(subitem.id)">{{subitem.name}}</el-menu-item>
				</el-submenu>
			</el-menu>
		</div>
		<ItemInfo :sonItem ="current_item" :sonItemid="sunItemid"></ItemInfo>
	</div>

</template>

<script>
import {
  getCaiPuAPI
} from '@/api/caipuAPI'
// 导入header组件
// import Header from '../components/Header.vue'
import ItemInfo from '../components/ItemInfo.vue'
export default {
  components: {
    // Header,
    ItemInfo
  },
  data () {
    return {
      // 准备存 第一次请求出来的数据
      info: null,
      // 准备存， 点击获取id 后 匹配的数据
      infoItem: null,
	  sunItemid: 13
    }
  },
  computed: {
    current_item () {
      // console.log(this.info[0])
      // return this.infoItem === null ? this.info[0] : this.infoItem
      if (this.infoItem === null) {
        console.log('if成功')
        if (this.info) {
          return this.info[0]
        } else {
          return []
        }
      } else {
        // console.log(22222)
        // console.log('if失败')
        // console.log(this.infoItem)
        return this.infoItem[0]
      }
    }
  },

  methods: {
    handleOpen (key, keyPath) {
      this.currentItem(key)
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClick (id) {
      // console.log(id)
	  // console.log(this.infoItem)
	  var index = this.infoItem[0].content.findIndex(item => item.id === id)
	  var new1 = this.infoItem[0].content.slice(index, -1)
	  var newArray2 = this.infoItem[0].content.slice(0, index)
	  new1.push(...newArray2)
	  this.infoItem[0].content = new1
	  // console.log(this.infoItem)
    },
    async initMenuAll () {
      const res = await getCaiPuAPI()
      if (res.data.message === 'OK') {
        var data = res.data.data.first_title
        this.info = data
      }
    },
    currentItem (index) {
      var currentItem = this.info.filter((item) => {
        return item.id === parseInt(index)
      })
      this.infoItem = currentItem
    }
  },

  created () {
    this.initMenuAll()
  }
}
</script>

<style scoped>
	/* 全局导入公共样式 */
	@import url("../assets/css/common.css");

	.container {
		font-family: "楷体";
		width: 10rem;
		height: 5.625rem;
		margin: 0 auto;
		color: #949292;
		/* background: #100c2a; */
		background-color: #F0F0F0;
		/* overflow: auto; */
	}
	.container iframe{
		width: 100%;
		height: 0.75rem;		
	}
	.container .header{
		width: 100%;
		height: 0.75rem;
		position: sticky;
		top: 0;
		z-index: 20;
	}
	.nav {
		float: left;
		width: 2.1875rem;
		height: 5.625rem;
		overflow: auto;
	}

	.navbar {
		width: 100%;
		height: 0.75rem;
		font-size: 0.34375rem;
		background-color: #FFFFFF;
		color: #000000;
		text-align: center;
		font-family: "arial black";
		line-height: 0.75rem;
	}

	.navbar i {
		color: #F48130;
		font-size: 0.34375rem;
		margin-right: 0.0625rem;
	}

	.el-menu {
		text-align: center;
	}
	/* .el-menu .el-submenu{
		height: 2rem;
		overflow: auto;
	} */
	.el-menu .el-submenu span {
		font-size: 0.375rem;
	}

	.el-menu .el-menu-item {
		font-size: 0.3125rem;
	}
</style>
